const path = require('path');
// 热更新第二步
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
/*
	导入在内存中生成html页面的插件
	只要是插件，都一定要放到plugins节点中
	这个插件的两个作用：
		1.自动在内存中根据指定的页面生成一个内存页面
		2.自动把打包好的bundle.js追加到页面中去
*/
const htmlWebpackPlugin = require('html-webpack-plugin');

// 使用npm i html-webpack-plugin -D
// npm i style-loader css-loder -D
// npm i sass-loader node-sass -D
// npm i less-loader node-less -D
// npm i url-loader file-loader -D
module.exports = {
	entry:path.resolve(__dirname,'src/main.js'),//项目入口文件
	output:{//配置输出选项
		path:path.resolve(__dirname,'dist'),//配置输出的路径
		filename:'bundle.js' 	//配置输出的文件名
	},
	devServer:{//配置der-server
		// 命令参数的第二种形式，相对来说这种方式麻烦一点
		// open:true,//自动打开浏览器
		port:2222,//运行端口
		contentBase:'src',//指定托管的根目录
		hot:true// 启用热更新 第一步
	},
	plugins:[//配置插件节点
		new webpack.HotModuleReplacementPlugin(),//new一个热更新的模块对象，第三步

		new htmlWebpackPlugin({//创建一个在内存中生成的html页面插件
			template:path.join(__dirname,'./src/index.html'),//指定模板页面，将来回根据指定的页面路径，生成内存中的页面
			filename:'index.html' 	//指定生成页面的名称
		}),
		new VueLoaderPlugin()
	],
	module:{//这个节点，用于配置 所有 的第三方模块加载器
		rules:[//所有第三方模块的匹配规则
			{test:/\.css$/,use:['style-loader','css-loader']},//配置处理.css文件的第三方loader的规则
			{test:/\.less$/,use:['style-loader','css-loader','less-loader']},//配置处理.less文件的第三方loader规则
			// {test:/\.sass$/,use:['style-loader','css-loader','scss-loader']}
			{test:/\.(jpg|png|gif|bmp|jpeg|svg)$/,use:'url-loader?limit=200&name=[hash:10]-[name].[ext]'},//处理图片路径的loader
			// limit的值，就是图片的大小，单位是byte,如果引用的图片大于或等于给定的值，则不会被转成base64格式的字符串，反之就会转换。
			{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},
			{ test: /\.vue$/, use: 'vue-loader' },
			{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ } // 配置 Babel 来转换高级的ES语法
		]
	},
	resolve: {
		alias: {//修改Vue被导入时候的包的路径
			// "vue$":"vue/dist/vue.js"
		}
	}

}